<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>兄弟 相邻兄弟选择器</title>
    <style >
        /* 相邻兄弟选择器
         选择p元素紧挨的后面的span元素 */
      p + span {
        color: red;
      }
      /* 兄弟选择器 
      选中p后面的所有span弟弟*/
      p ~ span {
        color: green;
      }
    </style>
  </head>
  <body>
    <span>1</span>
    <p>0</p>
    <!-- <hr> 如果这里加了hr，p就没有相邻的span弟弟了-->
    <span>2 </span>
    <div>
      <span>3</span>
    </div>
    <span>4</span>
  </body>
</html>
